<!--图片组件-->
<template>
  <component v-if='imgs !== undefined'>
    <div align='center'>
      <q-card class='content-size'>
        <q-carousel
          swipeable
          animated
          v-model="slide"
          color="purple"
          control-color="yellow"
          style='height: 18em'
        >
          <q-carousel-slide v-for='(item, index) in imgs' :key='index'  :name="index+1" style='padding: 0px' >
            <img draggable="false" crossorigin='anonymous' class="rounded-borders col-6 full-height" :src="imgBase64[index]"  @click='jumpToImg'/>
          </q-carousel-slide>

          <template v-slot:control>
            <q-carousel-control
              position="bottom-right"
              :offset="[18, 18]"
            >
              <div style='background-color: rgba(0,0,0,0.5);padding-left: 0.5em;padding-right: 0.5em;border-radius: 0.5em'>
                <q-icon name="image" style="font-size: 1.2rem;"/>
                {{slide}}/{{total}}
              </div>
            </q-carousel-control>
          </template>

        </q-carousel>

      </q-card>
    </div>

  </component>
</template>

<script setup lang='ts'>
import { ref, defineProps, onMounted } from 'vue';
import { urlToBase64 } from 'pages/kungfu/function/htmlToPdf';
import { useRouter } from 'vue-router';
import { useStore } from 'src/store';


let imgBase64 = ref<string[]>([]);

let slide = ref<number>(1);
let fullscreen = ref<boolean>(false);
let autoplay = ref<boolean>(true)

let imgTemp = []
const store = useStore();


const props = defineProps({
  imgs: {
    type: [String]
  }
});

function transform () {
  const imgs = props.imgs;
  for (let i=0;i<imgs.length;i++) {
    const url = imgs[i];
    urlToBase64(url).then(res => {
      imgTemp[i] = res
      imgBase64.value = imgTemp
    })
  }

}

let total = ref<number>(props.imgs.length);
const router = useRouter();

function jumpToImg () {
  store.commit('sphinx/updateUrls', props.imgs);
  void router.push("/weapp/img");
}
onMounted(() => {
  transform()
})
</script>

<style scoped lang='sass'>

</style>
